<template>
  <div>
    {{ multipleSelection }}
    <section>
      <el-input v-model="input"
       placeholder="请输入内容"
       style="width: 200px"></el-input>
      <el-select v-model="value" placeholder="请选择">
    <el-option
       v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"> 
    </el-option>
  </el-select>
  <el-button type="success"
 class="el-icon-present"
  @click="addbotfun()"
  >配货完成</el-button>

<el-button type="primary"
 class="el-icon-sell"
  @click="delsfun()"
  >出库</el-button>
  <el-button type="danger"
 class="el-icon-delete"
  @click="delfun()"
  >关闭订单</el-button>
    </section>
   
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="orderNo" label="订单号">
       
      </el-table-column>
      <el-table-column prop="totalPrice" label="订单总价"> </el-table-column>
      <el-table-column label="订单状态"
      prop="orderStatus">
      <template slot-scope="scope">
          <span v-if="scope.row.orderStatus == 1" >待支付</span>
          <span v-if="scope.row.orderStatus == -2">手动关闭</span>
          <span v-if="scope.row.orderStatus == 2">出库成功</span>
          <span v-if="scope.row.orderStatus == 3">交易成功</span>
        </template>
      
      </el-table-column>
      <el-table-column label="支付方式">
        <template slot-scope="scope">
        <span v-if="scope.row.payType == 1" >微信支付</span>
          <span v-if="scope.row.payType == 2">支付宝支付</span>
          <span v-if="scope.row.payType == 0" >未支付</span>
         
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column label="操作">

        <template slot-scope="scope">
        <el-button type="text" @click="handleDelete(scope.$index, scope.row)">关闭订单</el-button>
        <el-button type="text" @click="xiangqing(scope.$index, scope.row)">订单详情</el-button>
       </template>
    
     
  
    </el-table-column>
    </el-table>

    <div class="jz">
      <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
    data(){
      return{
        tableData: [],
        multipleSelection: [],//
        ruleForm: {
        redirectName: "",
        name: "",
        // redirect: "",
        // carousel: "",
      },
      input: '',
      options: [{
          value: 'quanbu',
          label: '全部',
        }, {
          value: '待支付',
          label: '待支付'
        }, {
          value: '已支付',
          label: '已支付'
        }, {
          value: '配货完成',
          label: '配货完成'
        },
         {
          value: '出库成功',
          label: '出库成功'
        },
        {
          value: '交易成功',
          label: '交易成功'
        },
        {
          value: '手动关闭',
          label: '手动关闭'
        },
        {
          value: '超时关闭',
          label: '超时关闭'
        },
        {
          value: '商家关闭',
          label: '商家关闭'
        }
      ],
        value: '',
        orderStatus:"",
        props: {
          lazy: true,
          lazyLoad (node, resolve) {
           let arry=[{
            id:1,
            value: 'quanbu',
            label: '全部',
           }]
           resolve(arry)
           
          }
        }

      }
    },
  mounted(){
  this.getfun(1)
  },
  methods: {
    handleCurrentChange(val) {
      this.getfun(val);
    },
 
    async handleDelete(index, row) {//关闭1个****
      let arry = [row.orderId];
      let result = await this.$http.put("/orders/close", {
  
          ids: arry,
        
      });
      console.log(row.orderId);
      // this.cancol();
      this.getfun(1)
    },
    async delsfun(){//出库
       let newArry=[];
        this.multipleSelection.map(item=>{
           newArry.push(item.orderId)
        })

        let result = await this.$http.put("/orders/checkOut", {
      
          ids: newArry,
        
      });
    
    
      this.getfun(1)
    },
    //  async guanbi(){//单个关闭订单
    //    let newArry=[];
    //     this.multipleSelection.map(item=>{
    //        newArry.push(item.orderId)
    //     })

    //     let result = await this.$http.put("/orders/close", {
      
    //       ids: newArry,
        
    //   });
    
    
    //   this.getfun(1)
    // },
    async delfun(){//批量关闭订单
       let newArry=[];
        this.multipleSelection.map(item=>{
           newArry.push(item.orderId)
        })

        let result = await this.$http.put("/orders/close", {
      
          ids: newArry,
        
      });
    
    
      this.getfun(1)
    },
    // submitForm(formName) {//创建按钮
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       if (this.title == "增加") {
    //         this.addlp()
    //         console.log("增加");
    //       } else {
    //        this.deput()
    //         console.log("修改");
           
    //       }
    //     } else {
    //       return false;
    //     }
    //   });
    // },
    colt() {//返回
    
      this.categoryLevel--;
      if(this.categoryLevel==1){
        this.parentId=0;
      }else if(this.categoryLevel==2){
      this.parentId=this.parentTe;
      }
      this.getfun(1);
    },
     handleEdit(index, row) {//修改
      this.title = "修改",
      this.dialogFormVisible = true,
      this.ruleForm.name = row.categoryRank,
      this.ruleForm.redirectName = row.categoryName
      this.categoryLevel=row.categoryLevel
      this.categoryId=row.categoryId
      this.parentId=row.parentId
      console.log(row);
      
    },
    async deput(){//修改
      let result = await this.$http.put("/categories",
        {
          categoryId:this.categoryId,
          categoryLevel:this.categoryLevel,
          categoryName: this.ruleForm.redirectName,
          categoryRank: this.ruleForm.name,
          parentId:this.parentId,
        })
        this.getfun(1)
        this.dialogFormVisible = false
        
    },

    handlenext(index, row) {//下级
      if(this.categoryLevel==3){
        this.$message("没有下一级了")
        return false;
      }
       this.categoryLevel++;
       if(this.categoryLevel==2){
        this.parentTe=row.categoryId;
       }
       this.parentId=row.categoryId;
       this.getfun(1)

    },
    async getfun(page) {//获取分页
      let result = await this.$http.get("/orders", {
        params: {
          pageNumber: page,
          pageSize: 10,
          orderNo:"",
          orderStatus:""
        }, 
      });
      // var arry=[]
      // result.data.list.map(item=>{
      //   arry.push({
          
      //   })
      // })
      this.orderStatus=result.data.list.orderStatus
    this.tableData = result.data.list;
    console.log(result);
     },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  async xiangqing(index,row){
    let result=await this.$http.get(`/orders/${row.orderId}`,{
      // params:{
      //   orderId:row.orderId
      // }
    }
     
    )
    console.log(row);
  },
    // addbotfun(){//配货完成
    // // this.title = "增加",
    // //   this.dialogFormVisible = trueu
    // //  this.ruleForm.name = "",
    // //  this.ruleForm.redirectName = ""
    // this.addlp()
    // },
   async addbotfun(){//配货完成
    let newArry=[];
        this.multipleSelection.map(item=>{
           newArry.push(item.orderId)
        })
    let result = await this.$http.put("/orders/checkDone",
        {
          data: {
          ids: newArry,
        },
        })
       
        this.getfun(1);
       ;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  }
    
}
</script>

<style lang="less" scoped>
.jz{
  text-align: center;
}
</style>

